<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js响应接口</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p style="font-size:25px;">计数器：{{counter}}</p>
        <button @click="counter++" style="font-size: 25px;">点击我</button>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:{
                counter:1
            }
        })
        //使用$watch属性实现数据的监听
        vm.$watch('counter',function(nval,oval){
            alert('计数器数值的变化:'+oval+'变为'+navl+'!');
        })
        setTimeout(
            //设置10s后计算器的值加上20
            function(){
                vm.counter +=20;
            },10000
        )
    </script>


<!--Vue.set方法用于设置对象的属性，它可以解决Vue无法检测添加属性的限制-->
<!--语法格式：   Vue.set(target,key,value)       target:对象或者数值    key:字符串或者数字    value:任何类型-->
    <div id = "app2">
        <p style = "font-size:25px;">计数器: {{ products.id }}</p>
        <button @click = "products.id++" style = "font-size:25px;">点击我</button>
    </div>
    <script type = "text/javascript">
        var myproduct = {"id":1, name:"book", "price":"20.50"};
        var vm = new Vue({
            el: '#app2',
            data: {
                products: myproduct
            }
        });
        vm.products.qty = "1";//给myproduct数组添加一个或者多个属性，get/set方法只可用于id,name,price属性，qty属性中不能使用
        Vue.set(myproduct, 'qty', 1);//给myproduct数组添加一个或者多个属性，此方法保证qty属性可以被get/set方法使用
        Vue.delete(myproduct, 'price'); //删除price属性，price属性的get/set方法也被删除
        console.log(vm);
        vm.$watch('products.id', function(nval, oval) {
            alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
        });
    </script>


<!--Vue.delete方法用于删除动态添加的属性-->
<!--语法格式：   Vue.delete(target,key)    target:对象或者数值    key:字符串或者数字-->
</body>
</html>